layui.config({
  version: '1551352891272' //为了更新 js 缓存，可忽略
});
layui.use(['form', 'laydate', 'laypage', 'table', 'element', 'layer'], function () {
  var laydate = layui.laydate,
    form = layui.form,
    laypage = layui.laypage, //分页
    table = layui.table, //表格
    element = layui.element, //元素操作
    layer = layui.layer
  //日期
  laydate.render({
    elem: '#date1'
  });

  laydate.render({
    elem: '#date2'
  });

  //执行一个 table 实例
  table.render({
    elem: '#demo',
    height: 420,
    url: 'layui/data.json', //数据接口
    toolbar: '#toolbarDemo', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    title: '高级列表',
    page: true, //开启分页
    text: {
      none: '暂无相关数据' //默认：无数据
    },
    cols: [
      [ //表头
        {
          field: 'proNo',
          title: '项目编号',
          width: 90,
          fixed: 'left',
          align: 'center',
          hide: true
        }, {
          field: 'proName',
          title: '项目名称',
          width: 150,
          sort: true,
          fixed: 'left',
          align: 'center',
          templet: '#titleTpl'
        }, {
          field: 'area',
          title: '区域',
          width: 90,
          sort: true, //排序
          align: 'center',
          hide: true
        }, {
          field: 'areaPeople',
          title: '区域负责人',
          width: 120,
          sort: true, //排序
          align: 'center',
          hide: true
        }, {
          field: 'phase',
          title: '项目阶段',
          width: 100,
          sort: true, //排序
          align: 'center'
        }, {
          field: 'customer',
          title: '客户名称',
          width: 90,
          align: 'center',
          hide: true
        }, {
          field: 'priority',
          title: '项目优先级',
          width: 110,
          sort: true, //排序
          align: 'center',
          hide: true
        }, {
          field: 'pdline1',
          title: '项目涉及产品线1',
          width: 150,
          hide: true
        }, {
          field: 'pdline2',
          title: '项目涉及产品线2',
          width: 150,
          hide: true
        }, {
          field: 'signedTime',
          title: '预计签单时间',
          width: 120,
          sort: true, //排序
          align: 'center'
        }, {
          field: 'sales',
          title: '销售负责人',
          width: 120,
          sort: true, //排序
          align: 'center'
        }, {
          field: 'pmp',
          title: '项目经理',
          width: 120,
          sort: true, //排序
          align: 'center'
        }, {
          field: 'clues',
          title: '线索负责人',
          width: 120,
          sort: true, //排序
          align: 'center'
        }, {
          field: 'product',
          title: '产品负责人',
          width: 120,
          sort: true, //排序
          align: 'center'
        }, {
          field: 'delivery',
          title: '交付负责人',
          width: 120,
          sort: true, //排序
          align: 'center',
          hide: true
        }, {
          field: 'whole',
          title: '项目总体进展',
          width: 400,
          // templet: '#titleTpl-1'
        }, {
          field: 'nextPlan',
          title: '下一步计划',
          width: 400,
          // templet: '#titleTpl-2'
        }, {
          field: 'salesProgress',
          title: '项目销售进展',
          width: 400,
          hide: true
          // templet: '#titleTpl-3'
        }, {
          field: 'salesNextPlan',
          title: '销售下一步计划',
          width: 400,
          hide: true
          // templet: '#titleTpl-4'
        }, {
          field: 'productProgress',
          title: '产品经理进展',
          width: 400,
          hide: true
          // templet: '#titleTpl-5'
        }, {
          field: 'productNextPlan',
          title: '产品经理下一步计划 ',
          width: 400,
          hide: true
          // templet: '#titleTpl-6'
        }, {
          field: 'risk',
          title: '困难和风险',
          width: 400,
          // templet: '#titleTpl-7'
        }, {
          field: 'weekly',
          title: '周报周期 ',
          width: 200,
          align: 'center',
          hide: true
        }, {
          field: 'financialContracts',
          title: '财务合同编号 ',
          width: 170,
          align: 'center',
          hide: true
        }, {
          field: 'customerContract',
          title: '客户合同编号 ',
          width: 170,
          align: 'center',
          hide: true
        }, {
          field: 'salesContract',
          title: '销售合同编号 ',
          width: 170,
          align: 'center',
          hide: true
        }, {
          field: 'contractAmount',
          title: '合同签订金额 ',
          width: 160,
          sort: true, //排序
          hide: true
        }, {
          field: 'ticketAmount',
          title: '已开票金额 ',
          width: 160,
          sort: true, //排序
          hide: true
        }, {
          field: 'acceptance',
          title: '验收情况 ',
          width: 400,
          hide: true
        }, {
          field: 'conclusion',
          title: '上周会议结论 ',
          width: 400,
          // templet: '#titleTpl-8'
        }, {
          fixed: 'right',
          title: '操作',
          width: 170,
          align: 'center',
          toolbar: '#barDemo'
        }
      ]
    ]
  });

  //分页
  laypage.render({
    elem: 'pageDemo', //分页容器的id
    count: 100, //总页数
    skin: '#1E9FFF', //自定义选中色值
    jump: function (obj, first) {
      if (!first) {
        layer.msg('第' + obj.curr + '页', {
          offset: 'b'
        });
      }
    }
  });

  //监听行工具事件
  table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data, //获得当前行数据
      layEvent = obj.event; //获得 lay-event 对应的值
    if (layEvent === 'detail') {
      // console.log(data)
      //tab层
      layer.tab({
        area: ['700px', '450px'],
        tab: [{
          title: '项目信息',
          content: `<div style="padding:15px;height:406px;overflow:auto;">
            <ul class="layui-timeline">
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">基本信息</h3>
                  <ul>
                    <li>项目编号：`+ data.proNo +`</li>
                    <li>项目名称：`+ data.proName +`</li>
                    <li>区域：`+ data.area +`</li>
                    <li>区域负责人：`+ data.areaPeople +`</li>
                    <li>项目阶段：`+ data.phase +`</li>
                    <li>客户名称：`+ data.customer +`</li>
                    <li>项目优先级：`+ data.priority +`</li>
                    <li>涉及产品线1：`+ data.pdline1 +`</li>
                    <li>涉及产品线2：`+ data.pdline2 +`</li>
                  </ul>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">其他信息</h3>
                  <ul>
                    <li>预订签单时间：`+ data.signedTime +`</li>
                    <li>周报周期：`+ data.weekly +`</li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
          `
        }, {
          title: '项目进展',
          content: `<div style="padding:15px;height:406px;overflow:auto;">
            <ul class="layui-timeline">
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">成员信息</h3>
                  <ul>
                    <li>线索负责人：`+ data.clues +`</li>
                    <li>项目经理：`+ data.pmp +`</li>
                  </ul>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">项目总体进展</h3>
                  <p>
                   ` + data.whole + `
                  </p>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">下一步计划</h3>
                  <p>` + data.nextPlan + `</p>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">困难和风险</h3>
                  <p>` + data.risk + `</p>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">上周会议结论</h3>
                  <p>` + data.conclusion + `</p>
                </div>
              </li>
            </ul>  
          </div>`
        }, {
          title: '销售进展',
          content: `<div style="padding:15px;height:406px;overflow:auto;">
          <ul class="layui-timeline">
              <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                      <h3 class="layui-timeline-title">成员信息</h3>
                      <ul>
                        <li>销售负责人：`+ data.sales +`</li>
                      </ul>
                    </div>
                  </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">项目销售进展</h3>
                  <p>` + data.salesProgress + `</p>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">销售下一步计划</h3>
                  <p>` + data.salesNextPlan + `</p>
                </div>
              </li>
            </ul> 
          </div>`
        }, {
          title: '产品进展',
          content: `<div style="padding:15px;height:406px;overflow:auto;">
          <ul class="layui-timeline">
          <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">成员信息</h3>
                  <ul>
                    <li>产品负责人：`+ data.product +`</li>
                  </ul>
                </div>
              </li>
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">产品经理进展</h3>
              <p>` + data.productProgress + `</p>
            </div>
          </li>
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">下一步计划</h3>
              <p>` + data.productNextPlan + `</p>
            </div>
          </li>
        </ul>  </div>`
        }, {
          title: '合同回款',
          content: `<div style="padding:15px;height:406px;overflow:auto;">
          <ul class="layui-timeline">
          <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">成员信息</h3>
                  <ul>
                    <li>交付负责人：`+ data.delivery +`</li>
                  </ul>
                </div>
              </li>
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">合同信息</h3>
              <ul>
                <li>财务合同编号：`+ data.financialContracts +`</li>
                <li>客户合同编号：`+ data.customerContract +`</li>
                <li>销售合同编号：`+ data.salesContract +`</li>
                <li>合同签订金额：`+ data.contractAmount +`</li>
              </ul>
            </div>
          </li>
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">回款验收</h3>
              <ul>
                <li>已开票金额：`+ data.ticketAmount +`</li>
                <li>验收情况：<p>`+ data.acceptance +`</p></li>
              </ul>
            </div>
          </li>
        </ul>  
              
        </div>`
        }]
      });
    }
    if (layEvent === 'proinfo') {
      layer.msg('项目数据')
    }
  });

});